<template>
  <div class="system-logs">
    <el-card class="logs-card">
      <template #header>
        <div class="card-header">
          <div class="header-left">
            <el-icon :size="20"><Document /></el-icon>
            <span>系统日志</span>
          </div>
          <div class="header-right">
            <el-button :icon="Refresh" @click="loadLogs" :loading="loading">
              刷新
            </el-button>
          </div>
        </div>
      </template>

      <div class="log-info">
        <el-text type="info" size="small">
          日志文件位置: {{ logPath }}
        </el-text>
      </div>

      <el-divider />

      <div class="log-content">
        <el-input
          v-model="logContent"
          type="textarea"
          :rows="25"
          readonly
          placeholder="加载中..."
        />
      </div>

      <div class="log-footer">
        <el-text type="info" size="small">
          显示最近 1000 行日志
        </el-text>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { Document, Refresh } from '@element-plus/icons-vue';

const logContent = ref('');
const logPath = ref('');
const loading = ref(false);

onMounted(async () => {
  await loadLogs();
});

async function loadLogs() {
  loading.value = true;
  try {
    const result = await window.electronAPI.config.getLogContent();
    logContent.value = result.content;
    logPath.value = result.path;
  } catch (error) {
    ElMessage.error('加载日志失败: ' + error.message);
  } finally {
    loading.value = false;
  }
}
</script>

<style scoped>
.system-logs {
  padding: 20px;
  max-width: 1200px;
}

.logs-card {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 16px;
}

.header-right {
  display: flex;
  gap: 8px;
}

.log-info {
  margin-bottom: 10px;
}

.log-content {
  margin: 20px 0;
}

.log-content :deep(.el-textarea__inner) {
  font-family: 'Courier New', monospace;
  font-size: 12px;
  line-height: 1.5;
  background-color: #f5f7fa;
}

.log-footer {
  margin-top: 10px;
  text-align: right;
}
</style>
